<style lang="less" scoped src="./invoice.less"></style>
<script src="./invoice.js"></script>

<template>
    <div class="make">
        <div class="make-container">
            <div class="make-preview">
                <div class="image-edit" ref="image">
                    <img class="bg-image" :src="backgroundUrl">
                    <div class="overlay">
                        <div class="sprite"
                             :style="getSpriteStyle(sprite)"
                             v-for="(sprite, i) in makeTemplate.sprites">
                            <div class="text" v-if="sprite.type === 'text'" v-html="sprite.content"></div>
                            <div class="variable" v-if="sprite.type === 'variable'" v-html="sprite.content"></div>
                            <div class="picture" v-if="sprite.type === 'picture'">
                                <img :src="sprite.imageSrc">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="padding: 10px">
                <Button type="primary" size="large" @click="save">生成</Button>
                <Button type="primary" size="large" @click="back">关闭</Button>
            </div>
        </div>
    </div>
</template>